<template>
    <div class="search">
        <span v-if="!searchInput" class="title">{{title}}</span><input ref="input" v-model="searchVal" placeholder="请输入姓名、拼音搜索"  v-if="searchInput" class="search-input" type="text">
        <i @click.stop="searchArea" class="icon-search searchIcon" v-if="!searchInput"></i>
        <span class="searchIcon" v-if="searchInput" @click="cancel">取消</span>
    </div>

</template>

<script>
import Vue from 'vue'

export default {
    name: "app",
    components: {

    },
    props: ["title", 'value','isSearch'],
    data() {
        return {
            searchInput: false,
            searchVal: null
        };
    },
    created() {
        this.searchVal = this.value;
    },
    watch: {
        searchVal: function(newVal, oldVal) {
            this.search();//@blur="searchInput = !searchInput"
        }
    },
    computed: {

    },
    methods: {
        search: function(e) {
            if (!this.searchInput) {
                this.searchVal = null;
            } else {
                console.log(this.searchVal);
                this.$emit("input", this.searchVal);
            }


        },
        searchArea:function(){
            this.searchInput = true;
            this.searchVal = null;
            this.$emit("update:isSearch",this.searchInput)
            Vue.nextTick(() => {
                this.$refs.input.focus();
            })
        },
        cancel(){
            this.searchInput = false;
            this.$emit("update:isSearch",this.searchInput);
        }
    }
};
</script>

<style scoped="scoped" lang="less">
.search {
    height: 1rem;
    position: relative;
    line-height: 1rem;
    font-size: 0.36rem;
    padding: 0 0.3rem;
    background-color: #fff;
    overflow: hidden;
    clear: both;
    .title {
        color: #5DB6DA;
    }
    i{
        right: 0rem;
        position: absolute;
        line-height: 1rem;
        height: 1rem;
        top:0;
        padding: 0 0.32rem;
        width: 1rem;
    }
    span.searchIcon{
        right: 0rem;
        position: absolute;
        line-height: 1rem;
        height: 1rem;
        top:0;
        color:#5DB6DA;
        width: 1rem;
    }
    .search-input {
        width: 100%;
        border: none;
        display: inline-block;
        padding-right:1rem;
        font-size: 0.32rem;
        height: 0.96rem;
        background-color: transparent;
    }
    .search-input:focus {
        outline: none;
    }
    .search-input::-webkit-input-placeholder {
        color: #ccc;
        font-size: 0.32rem;
    }
}
</style>



